﻿@page "/basket"
@attribute [Authorize]
@implements IDisposable
@inject UserBasket _basket
@inject NavigationManager _navigationManager
@inject Settings _settings

<div class="esh-basket">
    <div class="container">
        <h1 class="mb-4 mt-5">[ Shopping Bag ]</h1>

        @if (_error != null)
        {
            <div class="alert" role="alert">
                Error updating basket, please try later. @_error
            </div>
        }

        <div class="row">
            <div class="col-6 col-md-8 col-lg-9">
                <div class="esh-basket-items row">
                    @foreach (var item in _basket.Items)
                    {
                        <div class="col-12 col-md-6 col-lg-4">
                            <article class="esh-basket-item">
                                <div class="esh-basket-thumbnail-wrapper">
                                    <div class="esh-basket-delete" @onclick="@(() => RemoveItemAsync(item))">
                                        <img class="esh-basket-delete-svg" src="images/delete.svg" />
                                    </div>
                                    <img class="esh-basket-thumbnail" src="@item.GetPictureUrl(_settings)" />
                                </div>
                                <div class="esh-basket-title">@item.ProductName</div>
                                <div class="esh-basket-description divider d-flex align-items-center justify-content-between">
                                    <div class="">$@item.UnitPrice</div>
                                    <div class="esh-basket-buttons d-flex justify-content-center">
                                        <button class="esh-basket-button @(item.Quantity == 1 ? "is-disabled" : "")"
                                                @onclick="@(() => SetItemQuantityAsync(item, item.Quantity - 1))">
                                            <img class="esh-basket-button-svg"
                                                 src="images/minus.svg" />
                                        </button>
                                        <div class="esh-basket-quantity">@item.Quantity</div>
                                        <button class="esh-basket-button"
                                                @onclick="@(() => SetItemQuantityAsync(item, item.Quantity + 1))">
                                            <img class="esh-basket-button-svg"
                                                 src="images/plus.svg" />
                                        </button>
                                    </div>
                                    <div class="esh-basket-price text-right">$@item.GetFormattedTotalPrice()</div>
                                </div>
                            </article>
                        </div>
                    }
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-3">
                <div class="esh-basket-checkout p-4">
                    <h2 class="esh-basket-checkout-title">Your shopping bag</h2>
                    <div class="mb-3 u-text-sm">(@_basket.TotalItemCount items)</div>

                    <div class="d-flex justify-content-between align-items-center font-weight-bolder">
                        <div>TOTAL</div>
                        <div>$@_basket.GetFormattedTotalPrice()</div>
                    </div>
                </div>

                <div class="divider u-background-brightest p-4">
                    <div>
                        <button class="btn btn-primary u-width-100 u-minwidth-unset" @onclick=@Checkout>Checkout</button>
                    </div>
                </div>
                <div class="p-4">
                    <NavLink class="btn btn-secondary u-width-100 u-minwidth-unset" href="/">Continue Shopping</NavLink>
                </div>
            </div>
        </div>
    </div>
</div>


@code {

    private string? _error;

    protected override void OnInitialized()
    {
        _basket.ItemsChanged += OnBasketItemsChanged;
    }

    private void OnBasketItemsChanged(object? sender, EventArgs? e)
    {
        StateHasChanged();
    }

    private async Task RemoveItemAsync(BasketItem item)
    {
        try
        {
            await _basket.RemoveItemAsync(item);
            _error = null;
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            _error = ex.Message;
        }
    }

    private async Task SetItemQuantityAsync(BasketItem item, int quantity)
    {
        try
        {
            await _basket.SetItemQuantityAsync(item, quantity);
            _error = null;
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            _error = ex.Message;
        }
    }

    private void Checkout()
    {
        if (_basket.Items.Any())
        {
            _navigationManager.NavigateTo("checkout");
        }
    }

    void IDisposable.Dispose()
    {
        _basket.ItemsChanged -= OnBasketItemsChanged;
    }
}
